<template>
  <view>
    <u-form :model="form" ref="uForm" class="center" label-width="150rpx" :rules="rules">

      <!--      <div class="hiddenFormItem">-->
      <!--        <u-form-item label="业主id:">-->
      <!--          <u-input v-model="form.ownerId"/>-->
      <!--        </u-form-item>-->
      <!--      </div>-->

      <u-form-item label="业主类型:" :required="true" prop="ownerType" @click="showOwnerTypePicker = true">

        <u-picker class="picker" :show="showOwnerTypePicker" :columns="ownerTypes"
                  @confirm="handleConfirm('ownerType',$event)" @cancel="handleCancel('ownerType')"
                  keyName="label">
        </u-picker>

        <u-input v-model="ownerTypeText" placeholder="请选择"></u-input>

      </u-form-item>


      <u-form-item label="小区名称:" prop="communityId" :required="true" @click="showCommunityPicker = true">
        <u-picker :show="showCommunityPicker" :columns="communities"
                  @confirm="handleConfirm('community',$event)"
                  @cancel="handleCancel('community')"
                  keyName="label"/>
        <u-input v-model="communityText" placeholder="请选择"></u-input>
      </u-form-item>

      <u-form-item label="楼栋名称:" prop="buildingId" :required="true" @click="showBuildingMessage">
        <u-picker :show="showBuildingPicker" :columns="buildings"
                  @confirm="handleConfirm('building',$event)"
                  @cancel="handleCancel('building')"
                  keyName="label"/>
        <u-input v-model="buildingText" placeholder="请选择"></u-input>
      </u-form-item>


      <u-form-item label="单元名称:" prop="unitId" :required="true" @click="showUnitMessage">
        <u-picker :show="showUnitPicker" :columns="units"
                  @confirm="handleConfirm('unit',$event)"
                  @cancel="handleCancel('unit')"
                  keyName="label"/>
        <u-input v-model="unitText" placeholder="请选择"></u-input>
      </u-form-item>

      <u-form-item label="房间名称:" prop="roomId" :required="true" @click="showRoomMessage">
        <u-picker :show="showRoomPicker" :columns="rooms"
                  @confirm="handleConfirm('room',$event)"
                  @cancel="handleCancel('room')"
                  keyName="label"/>
        <u-input v-model="roomText" placeholder="请选择"></u-input>
      </u-form-item>

      <u-form-item label="备注:">
        <u--textarea v-model="form.remark" placeholder="请输入内容"></u--textarea>
      </u-form-item>
    </u-form>
    <view style="margin:auto ;text-align: center;padding:0 10%;">
      <u-button @click="submit" type="primary" :ripple="true" ripple-bg-color="#909399"
                style="text-align: center;">提交
      </u-button>
    </view>

  </view>
</template>

<script>

export default {
  data() {
    return {
      ownerTypeText: '',
      communityText: '',
      buildingText: '',
      unitText: '',
      roomText: '',
      showOwnerTypePicker: false,
      showCommunityPicker: false,
      showBuildingPicker: false,
      showUnitPicker: false,
      showRoomPicker: false,
      ownerTypes: [], //业主类型集合
      communities: [], //社区集合
      buildings: [], //楼栋集合
      units: [], //单元集合
      rooms: [], //房间集合
      form: {
        ownerId: '',
        // createBy: '',
        ownerType: '',
        communityId: '',
        buildingId: '',
        unitId: '',
        roomId: '',
        remark: ''
      },
      rules: {
        // createBy: [{
        //   required: true,
        //   message: '请输入真实姓名',
        //   trigger: ['blur']
        // }],
        ownerType: [{
          required: true,
          message: '请输入业主类型',
          trigger: ['change']
        }],
        communityId: [{
          required: true,
          message: '请输入小区名称',
          trigger: ['change']
        }],
        buildingId: [{
          required: true,
          message: '请输入楼栋名称',
          trigger: ['change']
        }],
        unitId: [{
          required: true,
          message: '请输入单元名称',
          trigger: ['change']
        }],
        roomId: [{
          required: true,
          message: '请输入房间名称',
          trigger: ['change']
        }]
      },

    };
  },
  methods: {
    handleConfirm(type, value) {
      if (type === 'ownerType') {
        this.ownerTypeText = value.value[0].label;
        this.form.ownerType = value.value[0].value;
        console.log(this.form.ownerType)
        this.showOwnerTypePicker = false;
      } else if (type === 'community') {
        console.log("comvalue=", value)
        this.communityText = value.value[0].label;
        this.form.communityId = value.value[0].value;
        console.log(this.form.communityId)
        this.buildingText = '';
        this.unitText = '';
        this.roomText = '';
        this.loadBuildings();
        this.showCommunityPicker = false;
      } else if (type === 'building') {
        console.log("*********buildingValue=", value)
        this.buildingText = value.value[0].label;
        this.form.buildingId = value.value[0].value;
        this.unitText = '';
        this.roomText = '';
        this.loadUnits();
        this.showBuildingPicker = false;

      } else if (type === 'unit') {
        this.unitText = value.value[0].label;
        this.form.unitId = value.value[0].value;
        console.log(this.form.unitId)
        this.roomText = '';
        this.loadRooms();
        this.showUnitPicker = false;
      } else if (type === 'room') {
        this.roomText = value.value[0].label;
        this.form.roomId = value.value[0].value;
        console.log(this.form.roomId)
        this.showRoomPicker = false;
      }

    },
    handleCancel(type) {
      if (type === 'ownerType') {
        this.showOwnerTypePicker = false;
        // 处理业主类型选择器确认操作
      } else if (type === 'community') {
        this.showCommunityPicker = false;
        // 处理小区名称选择器确认操作
      } else if (type === 'building') {
        this.showBuildingPicker = false;
      } else if (type === 'unit') {
        this.showUnitPicker = false;
      } else if (type === 'room') {
        this.showRoomPicker = false;
      }
    },
    submit() {
      console.log('业主id*********2', this.form.ownerId)
      this.$refs.uForm.validate(
          // if (valid) {
          this.$http.post('/uni-app/ownerRoom', this.form)
              .then(
                  result => {
                    if (result.data.code === 200) {
                      uni.showToast({
                        title: '房屋绑定申请成功,请等待管理员审核',
                        icon: 'none',
                        duration: 2000
                      });
                      // 延迟2秒后执行页面跳转
                      setTimeout(() => {
                        // 执行页面跳转逻辑，比如返回到index.vue页面
                        uni.reLaunch({url: '/pages/index/index'})
                      }, 2000);
                    }
                  }
              )
          //   } else {
          //     console.log('验证失败');
          //   }
      );
    },
    loadOwnerTypes() {
      this.$http.get('/uni-app/OwnerTypes').then(result => {
        console.log(result.data.data)
        let list = result.data.data
        let arr = [];
        for (let i = 0; i < list.length; i++) {
          let key = {value: "", label: ""};
          key.label = list[i].dictLabel;
          key.value = list[i].dictValue;
          this.$set(arr, i, key);
        }
        this.ownerTypes.push(arr);
        console.log("ownerTypes=", this.ownerTypes);
      })
    },
    loadCommunities() {
      this.communities = [];
      this.$http.get('/uni-app/houseBinding/communities').then(result => {
        let list = result.data.data
        let arr = [];
        for (let i = 0; i < list.length; i++) {
          let key = {value: "", label: ""};
          key.label = list[i].communityName;
          key.value = list[i].communityId;
          this.$set(arr, i, key);
        }
        this.communities.push(arr);
        console.log("communities=", this.communities);
      })
    },
    loadBuildings() {
      const communityId = this.form.communityId
      console.log("communityId=", communityId)
      this.$http.get('/uni-app/buildings/' + communityId).then(result => {
        let list = result.data.data
        let arr = [];
        for (let i = 0; i < list.length; i++) {
          let key = {value: "", label: ""};
          key.label = list[i].buildingName;
          key.value = list[i].buildingId;
          this.$set(arr, i, key);
        }
        this.buildings = [];
        this.buildings.push(arr);
        console.log("buildings=", this.buildings);
      })
    },
    loadUnits() {
      const buildingId = this.form.buildingId
      console.log("buildingId=", buildingId)
      this.$http.get('/uni-app/units/' + buildingId).then(result => {
        let list = result.data.data
        let arr = [];
        for (let i = 0; i < list.length; i++) {
          let key = {value: "", label: ""};
          key.label = list[i].unitName;
          key.value = list[i].unitId;
          this.$set(arr, i, key);
        }
        this.units = [];
        this.units.push(arr);
        console.log("units=", this.units);
      })
    },
    loadRooms() {
      const unitId = this.form.unitId
      console.log("unitId=", unitId)
      this.$http.get('/uni-app/rooms/' + unitId).then(result => {
        let list = result.data.data
        let arr = [];
        for (let i = 0; i < list.length; i++) {
          let key = {value: "", label: ""};
          key.label = list[i].roomName;
          key.value = list[i].roomId;
          this.$set(arr, i, key);
        }
        this.rooms = [];
        this.rooms.push(arr);
        console.log("rooms=", this.rooms);
      })
    },
    showBuildingMessage() {
      let communityId = this.form.communityId
      if (communityId == null || communityId === "") {
        uni.showToast({
          title: '请先选择小区名称',
          icon: 'none'
        });
      } else {
        this.showBuildingPicker = true
      }
    },
    showUnitMessage() {
      let buildingId = this.form.buildingId
      if (buildingId == null || buildingId === "") {
        uni.showToast({
          title: '请先选择楼栋名称',
          icon: 'none'
        });
      } else {
        this.showUnitPicker = true
      }
    },
    showRoomMessage() {
      let unitId = this.form.unitId
      if (unitId == null || unitId === "") {
        uni.showToast({
          title: '请先选择单元名称',
          icon: 'none'
        });
      } else {
        this.showRoomPicker = true
      }
    }

  },
  mounted() {
    this.form.ownerId = uni.getStorageSync('ownerId');
    console.log('业主id*********', this.form.ownerId);
    // this.form.ownerId = '1338485732744232962';
    this.loadOwnerTypes();
    this.loadCommunities();
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  }
};
</script>
<style lang="scss">
.hiddenFormItem {
  display: none;
}
</style>
